<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <a class="logo" />
      <div class="toSearch">
        <van-icon name="search" size="15px" />
        <span>搜索商品，共30000+款好物</span>
      </div>
      <div class="toLoginBtn">登录</div>
    </div>
    <!-- 导航 -->
    <div class="list">
      <!-- <van-tabs v-model="active">
      <van-tab title="推荐">
          <template slot-scope="scope">
              <Recommend/>
          </template>
      </van-tab>-->
    <!-- </van-tabs>  -->
      <van-tabs line-width="65px" line-height="2px" animated title-active-color="rgb(221, 26, 33)">
        <van-tab title="推荐"></van-tab>
        <van-tab title="宠物生活"></van-tab>
        <van-tab title="服饰鞋包">服饰鞋包</van-tab>
        <van-tab title="服饰鞋包">服饰鞋包</van-tab>
        <van-tab title="服饰鞋包">服饰鞋包</van-tab>
      </van-tabs>
    </div>
    <!-- 内容区 -->
    <div class="body">
      <!-- <template slot-scope="scope"> -->
        <Recommend />
      <!-- </template> -->
    </div>

  </div>
</template>

<script>
import Recommend from "./recommend/index.vue";
export default {
  name: "Home",
  components: { Recommend },
  data() {
    return {
      active: 0,
    };
  },
  mounted() {
    this.$store.dispatch("getHomeList");
  },
};
</script>

<style lang="less">
.container {
  .header {
    box-sizing: border-box;
    display: flex;
    height: 28px;
    width: 100%;
    padding: 8px 15px;
    .logo {
      vertical-align: middle;
      width: 69px;
      height: 27px;
      background-size: 4.9rem 4.9rem;
      background-position: -1.6rem -3.15rem;
      display: inline-block;
      margin-right: 10px;
      background-image: url("/public/login.png");
    }
    .toSearch {
      line-height: 28px;
      height: 28px;
      background: #ededed;
      font-size: 13.5px;
      color: #666;
      border-radius: 5%;
      flex-grow: 1;
      box-sizing: border-box;
      padding-left: 15px;
      span {
        margin-left: 5px;
      }
    }
    .toLoginBtn {
      height: 20px;
      margin-left: 8px;
      width: 37px;
      font-size: 12px;
      border: 1px solid rgb(221, 26, 33);
      color: rgb(221, 26, 33);
      text-align: center;
      margin-top: 3px;
      vertical-align: center;
      border-radius: 12%;
      box-sizing: border-box;
      padding-top: 2px;
    }
  }
  .list {
    margin: 10px 0 0 0;
    height: 30px;
    // /deep/ .van-tabs {
    //   margin-top: -11px;
    //   height: 30px;
    //   .van-tab {
    //     margin-bottom: -15px;
    //     width: 100px;
    //     &:first-child {
    //       width: 60px;
    //     }
    //   }
    // }
  }
  .body{
    margin-top: 14px;
  }
}
</style>